$("nav>.row>:nth-child(2)").mouseover(function(){
  $(this).find("ul").css("display","flex")
})
$("nav>.row>:nth-child(2)").mouseout(function(){
  $(this).find("ul").css("display","none")
})
class Fun {
  constructor() {
    this.show = document.querySelector("main>.left>.show")
    this.mask = document.querySelector("main>.left>.show>.mask")
    this.enlarge = document.querySelector("main>.right>.enlarge")
    console.log(this.show,this.mask,this.enlarge)
    this.show_width = this.show.clientWidth
    this.show_height = this.show.clientHeight
    this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
    this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
    this.en_width()
    this.mouse()
    this.move()
  }
  en_width() {
    this.enlarge_width = this.mask_width * this.bg_width / this.show_width
    this.enlarge_height = this.mask_height * this.bg_height / this.show_height
    this.enlarge.style.width = this.enlarge_width + "px"
    this.enlarge.style.height = this.enlarge_height + "px"
  }
  mouse() {
    this.show.addEventListener("mouseover", () => {
      this.mask.style.display = "block"
      this.enlarge.style.display = "block"
    })
    this.show.addEventListener("mouseout", () => {
      this.mask.style.display = "none"
      this.enlarge.style.display = "none"
    })
  }
  move() {
    this.show.addEventListener("mousemove", e => {
      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
      this.mask.style.left = x + "px"
      this.mask.style.top = y + "px"

      this.enlarge.firstElementChild.style.left = -x * this.enlarge_width / this.mask_width + "px"
      this.enlarge.firstElementChild.style.top = -y * this.enlarge_height / this.mask_height + "px"
    })
  }
}

const goodsId = window.sessionStorage.getItem("goodsId")

!goodsId ? window.location.href = "./list.html" : getGoodsId()
if (!id){
  window.location.href = "./login.html" 
}
async function getGoodsId() {
  const res = await $.ajax({
    url: "http://localhost:8888/goods/item",
    data: {
      id: goodsId
    }
  })

  const str = `
  <div class="left">
  <div class="show">
  <img src="${res.info.img_big_logo}">
  <div class="mask"></div>
  </div>
</div>
<div class="right">
  <div class="top">
    <p>${res.info.title}</p>
    <p>${res.info.category}</p>
    <p>小米自营</p>
    <div>
      <span>${res.info.current_price}元</span>
      <del>${res.info.price}元</del>
    </div>
  </div>
  <div class="middle">
    <div class="left">
      <i class="iconfont">&#xe685;</i>
    </div>
    <div class="right">
      <p>北京&emsp;北京市&emsp;海淀区&emsp;清河街道&emsp;<span>修改</span></p>
      <p>有现货</p>
    </div>
  </div>
  <div class="bottom">
    <div>
      <p>${res.info.title}</p>
      <p><span>${res.info.current_price}元</span> <del>${res.info.price}元</del></p>
    </div>
    <p>总计:${res.info.current_price}元</p>
  </div>
  <button>加入购物车</button>
  <div class="enlarge">
				<img src="${res.info.img_big_logo}">
			</div>
</div>
  `
  $("main").html(str)

  $("main>.right>button").click(async function(){
    const res1 = await $.ajax({
      url: "http:localhost:8888/cart/add",
      method: "post",
      data: { goodsId, id },
      headers: { "authorization": token }
    })
    if(res1.code===1){
      $("aside").css("display","flex")
      $("main").css("display","none")
    }
  })   
  new Fun("main>.left>img")
}

$("aside>.right>button:first").click(function(){
  window.location.href = "./list.html"
})
$("aside>.right>button:last").click(function(){
  window.location.href = "./cart.html"
})

